import React from 'react';
import {StyleSheet, View} from 'react-native';
import Checkbox from "./Checkbox";
import List from '../list/List';


const ListItem = List.Item;
export default class CheckboxItem extends React.Component {

  handleClick = () => {
    this.refs && this.refs.handleClick();
    if (this.props.onClick) {
      this.props.onClick();
    }
  };

  render() {
    const {
      style,
      checkboxStyle,
      defaultChecked,
      checked,
      disabled,
      children,
      extra,
      onChange,
    } = this.props;

    const thumbEl = (
      <Checkbox
        ref={ref => this.refs = ref}
        style={[styles.checkboxItemCheckbox, checkboxStyle]}
        defaultChecked={defaultChecked}
        checked={checked}
        onChange={onChange}
        disabled={disabled}
      />
    )

    return (
      <ListItem
        style={style}
        onClick={disabled ? undefined : this.handleClick}
        extra={extra}
        thumb={thumbEl}
      >
        {children}
      </ListItem>)
  }


}

const styles = StyleSheet.create({
  checkboxItemCheckbox: {
    marginRight: 8,
    alignSelf: 'center',
  },
})
